<template>
<!-- 渲染课程列表 -->
  <div class="courseList">
      <header ><slot></slot> <div class="moreText">更多 <van-icon name="arrow" class="round"/></div></header>
    <ul class="listOutBoxUl">
      <li v-for="(value, index) in applyListData" :key="index" class="listOutBox" @click="toDetailsPage(value.courseId)">

        <div class="imgBox">
          <img :src="value.bannerFileUrl" alt="" class="imgSrc" />
        </div>
        <ul class="ul2">
          <li class="courseTitle">{{ value.courseTitle }}</li>
          <li class="freeGrey">
            共{{ value.subSectionNum }}节课 | {{ value.learningNum }}人报名学习
          </li>
          <li class="freeColor" v-if="value.discountPrice == 0">免费</li>
          <li class="discountPrice" v-else>
            <span>&yen;{{ value.discountPrice }}</span> &nbsp;
            <span class="coursePrice" v-if="value.coursePrice != ''">{{
              value.coursePrice
            }}</span>

          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>
 <script>
import { getCourseList } from "../../../api/index-api";

export default {
  name: "CourseList",
  data() {
    return {
      applyListData: null, //渲染列表数据
    };
  },
  methods: {
    toDetailsPage(data){
      this.$router.push({
        path:"/DetailsLayOut?courseId="+data
      })
    } 
  },
  created() {
    // 请求渲染列表数据
    getCourseList(this.typeSelection).then((res) => {
      this.applyListData = res.rows;
    });
  },
  props:{
    typeSelection:String,
  }
};
</script>
 <style scoped lang="less">
 .courseList{
   padding-top: 20px;
 }
 .listOutBoxUl{
   display: flex;
   flex-wrap: wrap;
  
 .listOutBox{
   width:50%;
   margin-top: 15px;
 
 }
    .imgBox{
      width: 100%;
      img{
        width: 90%;
        margin-left: 10px;
      }
    } 
    .ul2{
      padding-left: 10px;
      font-size: 14px;
    }
 }
 .courseTitle{
       overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
 }
 .freeGrey{
       color: #888; 
       font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    margin-top: 2px;
 }
 .freeColor{
       color: #00cf8c;
       font-size: 14px;
 }
 .discountPrice{
   margin-top: 3px;
       color: #ff4500;
       font-size: 16px;
 }
 .coursePrice{
       color: #999;
    text-decoration: line-through;
    font-size: 12px;
 }
 header{
   text-align: center;
   font-size: 24px;
   border-bottom: 2px solid #e8e8e8;
   padding: 15px 0;
   position: relative;
 }
 .round{
   
   vertical-align: middle;
 }
 .moreText{
   position: absolute;
   right: 5%;
   top: 34%;
   font-size: 14px;
       color: #999;
 }
</style>

